<template>
  <el-dialog
    title="指标配置"
    :visible.sync="show"
    :close-on-click-modal="false"
    width="50%"
  >
    <el-row>
      <el-col class="col" :span="9">
        <el-input size="small" v-model="name"></el-input>
        <div class="box">
          <el-tree
            style="max-height: 500px; overflow: auto"
            ref="tree"
            :data="typeTree"
            show-checkbox
            node-key="key"
            :props="treeProps"
            :filter-node-method="filterNode"
          >
          </el-tree>
          <div style="margin-top: 10px">
            <el-button
              size="mini"
              type="primary"
              @click="handleConfirm()"
              :loading="loading"
              >确认</el-button
            >
            <el-button size="mini" @click="handleReset()">重置</el-button>
          </div>
        </div>
      </el-col>
      <el-col class="col" :span="15">
        <div style="height: 32px; display: flex; align-items: center">
          指标选择区
        </div>
        <div class="list-box">
          <div class="item" v-for="item in list" :key="item.id">
            {{ item.quotaName }}
            <i class="el-icon-error icon" @click="delItem(item.id)"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button
        type="primary"
        :disabled="list.length == 0"
        @click="sub()"
        :loading="loading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      loading: false,
      name: "",
      typeTree: [],
      treeProps: {
        children: "children",
        label: "label",
      },
      allTree: [],
      list: [],
      param: null,
    };
  },
  watch: {
    name(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.$http.get("/cgjybzIndustry/getExpoList").then((res) => {
      let data = res.data.data;
      this.allTree = data;
      this.typeTree = data.reduce((ret, cur) => {
        if (ret.findIndex((r0) => r0.name == cur.name) < 0) {
          const children = data.reduce((ret1, cur1) => {
            if (
              cur1.name == cur.name &&
              ret1.findIndex((r) => r.industryType == cur1.industryType) < 0
            ) {
              const children1 = data
                .filter((d) => {
                  return (
                    d.name == cur1.name && d.industryType == cur1.industryType
                  );
                })
                .map((m) => {
                  return {
                    label: m.quotaName,
                    key: m.id,
                    ...m,
                  };
                });
              ret1.push({
                ...cur1,
                label: cur1.industryType,
                children: children1,
              });
            }
            return ret1;
          }, []);

          ret.push({
            ...cur,
            label: cur.name,
            children,
          });
        }

        return ret;
      }, []);
      console.log(this.typeTree);
    });
  },
  methods: {
    delItem(id) {
      let arr = [];
      this.list = this.list.reduce((prev, cur) => {
        cur.id !== id ? prev.push(cur) : null;
        cur.id !== id ? arr.push(cur.id) : null;
        return prev;
      }, []);
      this.$refs.tree.setCheckedKeys(arr);
    },
    handleConfirm() {
      const checked = this.$refs.tree.getCheckedKeys(true);
      this.list = this.allTree.reduce((prev, cur) => {
        checked.includes(cur.id) ? prev.push(cur) : null;
        return prev;
      }, []);
      console.log(checked, this.list);
    },
    handleReset() {
      this.$refs.tree.setCheckedKeys([]);
      this.list = [];
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    showModal(ev) {
      this.show = true;
      this.param = ev;
      if (ev.relationId !== null) {
        this.$nextTick(() => {
          let arr = ev.relationId.split(",").reduce((prev, cur) => {
            prev.push(+cur);
            return prev;
          }, []);
          this.$refs.tree.setCheckedKeys(arr);
          this.list = this.allTree.reduce((prev, cur) => {
            arr.includes(cur.id) ? prev.push(cur) : null;
            return prev;
          }, []);
          console.log(this.list);
        });
      }
    },
    cancel() {
      this.show = false;
      this.handleReset();
      this.$emit("cancel");
    },
    sub() {
      this.loading = true;
      let arr = this.$refs.tree.getCheckedKeys(true).join(",");
      this.param.relationId = arr;
      this.$http
        .post(`/cgjybzTopicConfiguration/updateTopicConfiguration`, this.param)
        .then((res) => {
          if (res.data.msg == "success") {
            this.$message.success("操作成功");
            this.cancel();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .finally(() => {
          this.loading = false;
          this.cancel();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.col {
  padding: 0 15px;
}
.box {
  margin-top: 15px;
}
::v-deep  .el-dialog__body {
  padding: 30px 20px 0;
}
.list-box {
  max-height: 500px;
  padding: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  .item {
    height: 35px;
    padding: 7px;
    border: 1px dashed;
    margin: 7px;
    position: relative;
    .icon {
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
}
::v-deep  .el-icon-error:before {
  font-size: 20px;
}
</style>
